<template>
	<div class="booksgit">
		<div class="tablist">
			<div class="swiper-container presslist" style="border-bottom: 1px dotted white;">
				<ul class="tab swiper-wrapper">
					<li class="l1 swiper-slide" @click="btn('全部')">全部</li>
					<li class="l1 swiper-slide" @click="btn(item)" v-for="(item,i) in pressList" :key="i">{{item}}</li>
				</ul>
			</div>



			<div class="swiper-container presslist3" style="border-bottom: 1px dotted white;">
				<ul class="tab swiper-wrapper">
					<li class="l3 swiper-slide" @click="btn3('全部')">全部</li>
					<li class="l3 swiper-slide" @click="btn3(item)" v-for="(item,i) in publicationDate" :key="i">
						{{item}}</li>
				</ul>
			</div>
		</div>

		<div class="xx">
			<ul>
				<li v-for="(item,index) in arr" :key="item.id">
					<router-link :to="`/mobile/bookdetail/${item.id}`">
						<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" />
						<h3>{{item.name}}</h3>
						<span v-show="sp != ''">{{sp}}</span>
					</router-link :to="`/mobile/bookdetail/${item.id}`">
				</li>
			</ul>
			<h1 v-if="arr == ''">没有搜索到相关数据</h1>
		</div>
	</div>
</template>

<script>
	// 导入swiper组件内容【周期函数内，第一第二阶段，如果是请求的数据进行轮播，建议在第三阶段/监听器内执行】
	import { Select } from 'element-ui';
import Swiper from 'swiper';
	export default {
		name: 'MobileBooksGit',
		data() {
			return {
				pressList: ['机械出版社', '电子出版社', '二十一世纪出版社', '中国人口出版社', '人民出版社', '清华大学出版社', '工业大学出版社', '上海交通大学出版社', '北京出版社'],
				publicationDate: [],
				arr: [],
				newlist: [],
				sp : '',
			}
		},
		methods: {
			btn(x) {
				this.arr = [];
				if (x == '全部') {
					this.arr = this.newlist
				} else {
					this.newlist.forEach((item, i) => {
						if (item.maker == x) {
							this.sp = x;
							this.arr.push(item);
						}
					})
				}
			},
			btn3(x) {
				this.arr = [];
				if (x == '全部') {
					this.newlist.forEach((item, i) => {
					})
					this.arr = this.newlist
				} else {
					this.newlist.forEach((item, i) => {
						let make = item.tmake.substring(0,4);
						if (make == x) {
							this.sp = x;
							this.arr.push(item);
						}
					})
				}
			}
		},
		//组件模板渲染完成后
		async mounted() {
			//出版日期循环
			let maxYear = new Date().getFullYear()
			for (let i = 2010; i <= maxYear; i++) {
				this.publicationDate.push(i);
			}

			// 调用轮播对象
			await new Swiper('.presslist', {
				// 调整轮播项之间的间距
				spaceBetween: 20,
				slidesPerView: 'auto',
			})
			new Swiper('.presslist3', {
				spaceBetween: 20,
				slidesPerView: 'auto',
			})
		},
		created(){
			this.$get('/api/public/findPageBook/1/20/0').then((rep)=>{
				this.newlist = rep.data.data.books;
				this.arr = this.newlist
			})
			
		}
	}
</script>

<style scoped>
	.booksgit {
		width: 100%;
		background-color: #f5d5a0;
		
	}

	.booksgit .tablist {
		width: 95%;
		margin: 0 auto 1rem;
	}


	.booksgit .tablist .tab {
		height: 2.5rem;
		line-height: 2.5rem;
	}

	.booksgit .tablist .tab .l1:hover {
		color: #94a932;
	}


	.booksgit .tablist .tab .l3:hover {
		color: #94a932;
	}

	.booksgit .tablist .tab li {
		color: #715e3e;
		font-size: 0.875rem;
		/* 不设置任何宽度，包括0 */
		width: unset;
	}

	.booksgit .xx h1 {
		color: white;
		text-align: center;
	}

	.booksgit .xx ul {
		width: 98%;
		margin: 0 auto 1.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.booksgit .xx ul li {
		width: 46%;
		overflow: hidden;
		margin-left: 0.6rem;
		margin-bottom: 0.5rem;
		background-color: white;
		text-align: center;
		position: relative;
	}

	.booksgit .xx ul li img {
		width: 80%;
		height: 10rem;
		margin-top: 1rem;
	}

	.booksgit .xx ul li h3 {
		width: 100%;
		height: 2.5rem;
		line-height: 2.5rem;
		font-size: 0.8rem;
		background-color: rgba(245, 213, 160, 0.5);
		color: #a67b5b;
		text-align: center;
		font-weight: normal;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.booksgit .xx ul li span {
		font-size: 0.7rem;
		background-color: rgba(248, 157, 57, 1.0);
		position: absolute;
		top: 0;
		right: 0;
		color: white;
		padding: 0.4rem 0.3rem;
		border-radius: 0 0 0 0.6rem;
	}
</style>
<!-- npm install vue-awesome-swiper@4 -->
<!-- npm install swiper@5 -->